import React, { Component } from 'react'
import { PageHeader, Button, Tabs, Divider } from 'antd'
import Ud from './Userdetail.module.css'
import './userDetail.css'
import { getUser } from '../../api/community'
import { EllipsisOutlined, UserOutlined, ShareAltOutlined, EditOutlined, LikeOutlined } from '@ant-design/icons';
import Avatar from 'antd/lib/avatar/avatar';
const list = [{}, {}]
const imgList = [{}, {}, {}, {}, {}, {}, {}, {}, {},]
const { TabPane } = Tabs;
export default class UserDetail extends Component {
  state = {
    user: {
      uid: this.props.location.state.uid
    }
  }
  componentDidMount() {
    getUser({
      uid: 1,
      faid: this.props.location.state.faid,
      page:1,
      pagesize:100
    }).then(res => {
      console.log(res)
    })
  }
  render() {
    return (
      <div className="haha">
        <PageHeader
          ghost={false}
          onBack={() => window.history.back()}
          title={this.props.location.state.faid}
          subTitle="用户详情"
          extra={
            <Button icon={<EllipsisOutlined />}></Button>
          }
        >
        </PageHeader>
        <div className={Ud.header}>
          <Avatar shape="square" size={60} icon={<UserOutlined />} />
          <div>
            <Button >关注</Button>
          </div>
        </div>
        <div className={Ud.username}>用户名</div>
        <div className={Ud.count}>
          <div><span className={Ud.num}>1</span>关注</div>
          <div><span className={Ud.num}>2</span>粉丝</div>
          <div><span className={Ud.num}>3</span>Ta有</div>
        </div>

        <div className={Ud.list}>
          <Tabs
            defaultActiveKey="1"
            centered
            animated={true}
          >
            <TabPane tab="动态" key="1" className={Ud.tab}>
              {
                list.map(el => <div className={Ud.listItem}>
                  <div className={Ud.avatar}>
                    <Avatar shape="square" size={50} icon={<UserOutlined />} />
                    <div className={Ud.userInfo}>
                      <div style={{ fontWeight: 'bold', fontSize: '.35rem' }}>用户名</div>
                      <div>2020-12-11</div>
                    </div>
                  </div>
                  <div className={Ud.info}>
                    <div className={Ud.text}>自身第四</div>
                    <img className={Ud.img} src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg5.autotimes.com.cn%2Fnews%2F2019%2F04%2F0411_090441110640.jpg&refer=http%3A%2F%2Fimg5.autotimes.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620463427&t=859141a7007b110bfc72acff55036cfe" />
                  </div>
                  <div className={Ud.footer}>
                    <ShareAltOutlined className={Ud.footicon} />
                    <div>
                      <EditOutlined className={Ud.footicon} />
                      <LikeOutlined className={Ud.footicon} />
                    </div>

                  </div>
                  <Divider />
                </div>)
              }
            </TabPane>

            <TabPane tab="相册" key="2" className={Ud.tab}>
              <div className={Ud.imgContain}>
                {
                  imgList.map(el =>
                    <img className={Ud.pic} src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201801%2F20%2F20180120182727_QLY2t.thumb.400_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620465410&t=07c7748164bba378e2d35fc1967dbade" />
                  )

                } </div>
            </TabPane>
          </Tabs>


        </div>
      </div>
    )
  }
}
